<template>
  <el-tooltip effect="dark"
              :content="text"
              :disabled="showTooltip"
              placement="top-start">
    <div class="tooltip_txt"
         @mouseenter="tooltip">{{text}}</div>
  </el-tooltip>
</template>

<script>
export default {
  name: 'TooltipTxt',
  props: {
    text: String
  },
  data() {
    return {
      showTooltip: true, // 鼠标移入元素是否显示气泡
    }
  },
  methods: {
    // 设置当前鼠标移入
    tooltip(e) {
      // 当前元素实际宽度包括隐藏部分
      let scrollWidth = e.target.scrollWidth
      // 当前元素显示宽度
      let offsetWidth = e.target.offsetWidth
      this.showTooltip = scrollWidth <= offsetWidth
    }
  }
}
</script>

<style scoped lang="less">
  .tooltip_txt{
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
